<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/login.min.css">
    <link rel="stylesheet" href="./plug/slide/css/normalize.css">
    <!-- <link rel="stylesheet" href="./plug/slide/css/htmleaf-demo.css"> -->
    <link rel="stylesheet" href="./plug/slide/assets/less/unlock.css">
    <style type="text/css">
		.bar {
			height: 40px;
			width: 345px;
		}
	</style>
</head>

<body>
    <!-- 头部开始 -->
    <header>
        <div class="h-nav main">
            <div class="logo">
                <a href="./index.html"><img src="./images/login/logo.jpg" alt=""></a>
            </div>
            <div class="info">
                <a href=""></a>
                <a href=""><img src="./images/login/1.png" alt=""></a>
                <a href=""></a>
            </div>
        </div>
    </header>
    <!-- 头部结束 -->

    <!-- 内容开始 -->
    <section class="main">
        <div class="loginBox">
            <div class="til">
                <h2>登录聚美</h2>
                <div>
                    <span>还没有聚美账号?</span>
                    <a href="./regist.html">30秒注册</a>
                </div>
            </div>
            <form>
                <div class="inpBox">
                    <input type="text" placeholder="已验证手机/邮箱/验证名">
                    <input type="text" placeholder="密码">
                    <!-- 滑动验证开始 -->
                  
                        <div class="wrapper">
                            <!-- <div class="bar1 bar"></div>
                            <div class="bar2 bar"></div>
                            <div class="bar3 bar"></div> -->
                            <div class="bar4 bar"></div>
                            <!-- <div class="bar5 bar"></div> -->
                        </div>

                  
                    <!-- 滑动验证结束 -->
                </div>

                <div class="dlu">
                    <div>
                        <input type="checkbox" name="" id="">
                        <span>自动登录</span>
                    </div>
                    <a href="">忘记密码?</a>
                </div>
                <button>登录</button>
            </form>
            <p>你也可以使用以下账号登录</p>
            <div class="otherLogin">
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <span>更多<button>+</button></span>
            </div>
        </div>
    </section>
    <!-- 内容结束 -->

    <!-- 底部开始 -->
    <footer>
        <div class="foot main">
            <p>COPYRIGHT &copy; 2010-2019 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利。 客服热线：400-011-0888</p>
            <ul>
                <li><span>京公网安备 11010102001226</span>|</li>
                <li><a href=""> 京ICP证111033号</a>|</li>
                <li><a href="">食品流通许可证 SP1101051110165515（1-1） </a>|</li>
                <li><a href="">营业执照</a>|</li>
                <li><a href="">公示制度</a></li>
            </ul>
            <img src="./images/login/f1.png" alt="">
        </div>
    </footer>
    <!-- 底部结束 -->










    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
        window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
    </script>
    <script src='./plug/slide/assets/js/unlock.js'></script>
    <script>
        // $('.bar1').slideToUnlock();
        // $('.bar2').slideToUnlock({
        //     height: 50,
        //     width: 200,
        // });
        // $('.bar4').slideToUnlock({
        //     text: '未解锁的文字',
        //     succText: '解锁成功的文字'
        // });
        $('.bar4').slideToUnlock({
            bgColor: '#fce',
            progressColor: '#f60',
            succColor: '#f00',
            textColor: '#fff',
            succTextColor: '#fff',
            text: '请滑动验证',
            succText: '验证成功'
        });
    </script>
</body>

</html>